//全局的组件
import { App } from 'vue'
//导入全局组件
import XtxSkeleton from './skeleton/index.vue'
import XtxCarousel from './carousel/index.vue'
import XtxMore from './more/index.vue'
import XtxBread from './bread/index.vue'
import XtxBreadItem from './bread/item.vue'
import defaultItem from '@/assets/images/200.png'
import { useIntersectionObserver } from '@vueuse/core'
import XtxCity from '@/components/city/index.vue'
// 统一管理所有的全局组件的插件
export default {
  install (app: App) {
     // 直接通过给 app 添加全局功能，来达到封装插件的目的
    // 注册全局组件：骨架屏组件
    app.component('XtxSkeleton',XtxSkeleton)
    app.component('XtxCarousel',XtxCarousel)
    app.component('XtxMore',XtxMore)
    app.component('XtxBread', XtxBread)
    app.component('XtxBreadItem', XtxBreadItem)
    app.component('XtxCity',XtxCity)
         // 注册自定义指令：懒加载图片
    app.directive('lazy', {
      mounted (el: HTMLImageElement, { value }) {
        // 监听 dom 元素
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          // 判断是否在可视区域
          if (isIntersecting) {
            // 设置图片路径
            el.src = value
            // 如果图片加载不出来，会触发图片的一个事件： onerror 事件
            el.onerror = function () {
            // 如果图片加载不出来，我们就加载一个默认图片
            el.src = defaultItem
          }
            // 结束监听器
            stop()
          }
        })
      }
    })
  }
}


